<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>日期管理</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/jquery.calendar.css" />
</head>
<body>
    <div class="ui-calendar">
        <div class="ui-calendar-box ">
            <div class="ui-calendar-left">
                <div class="ui-calendar-container fn-clear">
                    <div class="ui-calendar-select-box">
                        <div class="ui-calendar-year-box">
                            <div tabindex="0" class="ui-dropdown ui-dropdown-common ui-dropdown-hover">
                                <div class="ui-dropdown-btn-group">
                                    <div class="ui-dropdown-btn">2015年</div>
                                    <div class="ui-dropdown-btn-icon">
                                        <div class="ui-dropdown-btn-icon-border">
                                            <i class="ui-icon ui-icon-triangle-down"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-dropdown-menu" style="display:block; height:180px;">
                                    <div class="ui-dropdown-menu-inner">
                                        <ul class="ui-dropdown-menu-box">
                                            <li data-value="1900" class="ui-dropdown-option">1900年</li>
                                            <li data-value="1901" class="ui-dropdown-option">1901年</li>
                                            <li data-value="1902" class="ui-dropdown-option">1902年</li>
                                            <li data-value="1903" class="ui-dropdown-option">1903年</li>
                                            <li data-value="1904" class="ui-dropdown-option">1904年</li>
                                            <li data-value="1905" class="ui-dropdown-option ui-dropdown-selected">1905年</li>
                                            <li data-value="1906" class="ui-dropdown-option">1906年</li>
                                        </ul>
                                    </div>
                                    <div class="ui-scroll-ctrl-scroll ui-scroll-ctrl-scroll-hover" style="display:block;height: 180px;">
                                        <div class="ui-scroll-axis" style="height: 180px;"></div>
                                        <div class="ui-scroll-slider" style="display: block; height: 30px; top:20px;">
                                            <!--<div class="ui-scroll-s-top"></div>
                                            <div class="ui-scroll-s-bottom"></div>
                                            <div class="ui-scroll-s-block"></div>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ui-calendar-month-box">
                            <a class="ui-calendar-prev-month" href="javascript:void(0);">&lt;</a>
                            <a class="ui-calendar-next-month" href="javascript:void(0);">&gt;</a>
                            <div tabindex="0" class="ui-dropdown ui-dropdown-common">
                                <div class="ui-dropdown-btn-group">
                                    <div class="ui-dropdown-btn">6月</div>
                                    <div class="ui-dropdown-btn-icon">
                                        <div class="ui-dropdown-btn-icon-border">
                                            <i class="ui-icon ui-icon-triangle-down"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-dropdown-menu">
                                    <div class="ui-dropdown-menu-inner">
                                         <ul class="ui-dropdown-menu-box">
                                             <li data-value="1" class="ui-dropdown-option">1月</li>
                                             <li data-value="2" class="ui-dropdown-option">2月</li>
                                             <li data-value="3" class="ui-dropdown-option">3月</li>
                                             <li data-value="4" class="ui-dropdown-option">4月</li>
                                             <li data-value="5" class="ui-dropdown-option">5月</li>
                                             <li data-value="6" class="ui-dropdown-option ui-dropdown-selected" data-selected="selected">6月</li>
                                             <li data-value="7" class="ui-dropdown-option">7月</li>
                                             <li data-value="8" class="ui-dropdown-option">8月</li>
                                             <li data-value="9" class="ui-dropdown-option">9月</li>
                                             <li data-value="10" class="ui-dropdown-option">10月</li>
                                             <li data-value="11" class="ui-dropdown-option">11月</li>
                                             <li data-value="12" class="ui-dropdown-option">12月</li>
                                         </ul>
                                    </div>
                                    <div class="ui-scroll-ctrl-scroll">
                                        <div class="ui-scroll-axis"></div>
                                        <div class="ui-scroll-slider"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="javascript:void(0);" class="ui-btn ui-calendar-back-today">返回今天</a>
                    </div>

                    <div class="ui-calendar-table-box">
                        <table class="ui-calendar-table">
                            <tbody>
                            <tr>
                                <th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="ui-calendar-table-weekend">六</th><th class="ui-calendar-table-weekend">日</th>
                            </tr>
                            <tr>
                                <td>
                                    <div class="ui-calendar-relative">
                                    <a data-date="2015-6-1" class="ui-calendar-table-festival" href="javascript:void(0);">
                                        <span class="ui-calendar-daynumber">1</span>
                                        <span class="ui-calendar-table-almanac">儿童节</span>
                                    </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-2" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">2</span>
                                            <span class="ui-calendar-table-almanac">十六</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-3" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">3</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-4" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">4</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-5" class="ui-calendar-table-festival" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">5</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-6" class="ui-calendar-table-weekend ui-calendar-table-festival" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">6</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-7" class="ui-calendar-table-weekend" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">7</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-8" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">8</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-9" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">9</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-10" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">10</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-11" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">11</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-12" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">12</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-13" class="ui-calendar-table-weekend" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">13</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-14" class="ui-calendar-table-weekend" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">14</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-15" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">15</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-16" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">16</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-17" class="ui-calendar-table-today" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">17</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-18" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">18</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-19" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">19</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-20" class="ui-calendar-table-rest ui-calendar-table-weekend ui-calendar-table-festival" href="javascript:void(0);">
                                            <span class="ui-calendar-table-holiday-sign">休</span>
                                            <span class="ui-calendar-holiday-feast-sign">节</span>
                                            <span class="ui-calendar-daynumber">20</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-21" class="ui-calendar-table-rest ui-calendar-table-weekend ui-calendar-table-festival" href="javascript:void(0);">
                                            <span class="ui-calendar-table-holiday-sign">休</span>
                                            <span class="ui-calendar-daynumber">21</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-22" class="ui-calendar-table-rest ui-calendar-table-festival" href="javascript:void(0);">
                                            <span class="ui-calendar-table-holiday-sign">休</span>
                                            <span class="ui-calendar-daynumber">22</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-23" class="ui-calendar-table-festival" title="奥林匹克日" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">23</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-24" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">24</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-25" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">25</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-26" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">26</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-27" class="ui-calendar-table-weekend" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">27</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-28" class="ui-calendar-table-weekend ui-calendar-table-selected" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">28</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-29" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">29</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-6-30" class="" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">30</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-7-1" class="ui-calendar-table-festival ui-calendar-table-other-month" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">1</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-7-2" class="ui-calendar-table-other-month" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">2</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-7-3" class="ui-calendar-table-other-month" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">3</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-7-4" class="ui-calendar-table-weekend ui-calendar-table-other-month" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">4</span>
                                        </a>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui-calendar-relative">
                                        <a data-date="2015-7-5" class="ui-calendar-table-weekend ui-calendar-table-other-month" href="javascript:void(0);">
                                            <span class="ui-calendar-daynumber">5</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="ui-calendar-editor">
                    <div class="ui-calendar-sign-feast">标记为休息日</div>
                    <div class="ui-calendar-sign-holiday ui-calendar-sign-disabled">标记为节假日</div>
                </div>
            </div>
            <div class="ui-calendar-right">
                <div class="ui-calendar-info">
                    <h2>2015年6月指定休息日：</h2>
                    <p>暂无</p>
                    <ul class="ui-calendar-feast-list fn-clear">
                        <li class="ui-calendar-feast-item"><span>06.01</span><i>x</i></li>
                        <li class="ui-calendar-feast-item"><span>06.01</span><i>x</i></li>
                        <li class="ui-calendar-feast-item"><span>06.01</span><i>x</i></li>
                    </ul>
                </div>
                <div class="ui-calendar-info">
                    <h2>2015年6月法定节假日：</h2>
                    <p>暂无</p>
                    <ul class="ui-calendar-holiday-list fn-clear">
                        <li class="ui-calendar-holiday-item"><span>06.01</span><i>x</i></li>
                        <li class="ui-calendar-holiday-item"><span>06.01</span><i>x</i></li>
                        <li class="ui-calendar-holiday-item"><span>06.01</span><i>x</i></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>